import CouponSelect from '@/orderSubPack/couponSelect';
import pRightIcon from '@/orderSubPack/images/confirmOrder/right-icon.png';
import { Image, View } from '@tarojs/components';
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { SourceType } from '../../constant';
import baseStyles from '../action-base.module.scss';

const CouponView = ({
  // 自带
  dispatch,

  usableCouponListPlat,
  disabledCouponListPlat,
  discountAmountPlat,

  usableCouponList,
  disabledCouponList,
  discountAmount,

  // 传递
  sourceType,
}) => {
  const [isOpened, setIsOpened] = useState(false);

  let [usableList, disableList, amount] = [[], [], 0];
  if (sourceType === SourceType.platform) {
    [usableList, disableList, amount] = [
      usableCouponListPlat,
      disabledCouponListPlat,
      discountAmountPlat,
    ];
  } else if (sourceType === SourceType.store) {
    [usableList, disableList, amount] = [usableCouponList, disabledCouponList, discountAmount];
  }

  return (
    <>
      <CouponSelect
        {...{
          sourceType: sourceType === SourceType.store ? sourceType : undefined,
          usableCouponList: usableList,
          disabledCouponList: disableList,
          isOpened,
          dispatch,
        }}
        handleClose={(data) => {
          setIsOpened(false);

          if (data) {
            dispatch({
              type: 'giftCard/setOrderCouponList',
              payload: {
                sourceType,
                disabledCouponList: disableList,
                usableCouponList: data,
              },
            });
          }
        }}
      />
      <View className={baseStyles.ActionBase}>
        <View className="label">
          优惠券：
        </View>

        <View
          className="action"
          onClick={() => {
            setIsOpened(true);
          }}
        >
          {usableList?.length > 0 ? (
            amount !== undefined ? (
              <>
                <View className="tip customePageStyle">-¥{parseFloat(amount).toFixed(2)}</View>
                <Image src={pRightIcon} className="icon" />
              </>
            ) : (
              <>
                <View className="tip">去选择</View>
                <Image src={pRightIcon} className="icon" />
              </>
            )
          ) : disableList?.length > 0 ? (
            <View className="tip disable">未满足使用条件</View>
          ) : (
            <>
              <View className="tip disabled">暂无可用</View>
              <Image src={pRightIcon} className="icon" />
            </>
          )}
        </View>
      </View>
    </>
  );
};

export default connect(({ loading, giftCard }) => ({
  loading,

  usableCouponListPlat: giftCard.usableCouponListPlat,
  disabledCouponListPlat: giftCard.disabledCouponListPlat,
  discountAmountPlat: giftCard.discountAmountPlat,

  usableCouponList: giftCard.usableCouponList,
  disabledCouponList: giftCard.disabledCouponList,
  discountAmount: giftCard.discountAmount,
}))(CouponView);
